<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式
		 .html()         无参---功能：获取匹配元素集合中第一个元素
		                 有参---功能：获取匹配元素中所有元素并替换
		 
		 .val()           无参---功能：针对表单元素：input、select...
		                              获取第一个表单元素的值【value】
		                  有参---功能：针对表单元素：input、select...
						              设置表单元素的值，input直接设置
									                   select不能直接设置，设置原有value值
				        特点：设置表单元素+内容、下拉列表只能添加存在value值
		 .text()        无参--获取匹配元素集合中所有元素的文本内容
		                有参---【设置】获取匹配元素集合中所有元素的文本内容做替换
						特点：添加内容
		 -->
	</head>
	<body>
		<h1>html（）函数的使用</h1>
		<button>html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button>val()函数 无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="文本框提示">
		<!-- html:按钮 .btn2  select>option*3
		     jq:点击按钮，显示第一个表单元素的值
		 -->
		 <br />
		 <button class="btn2">val()函数【select】 无参</button>
		  <button class="btn3">val()函数【select】 有参</button>
		 <select>
			 <!-- option包裹用户显示数据  option属性value真实的数据-->
			 <option value="rem1">lorem1</option>
			 <option value="rem2">lorem2</option>
			 <option value="rem3">lorem3</option>
		 </select>
		 <h1>text()函数的使用:包裹内容：文本</h1>
		 <button class="btn4">text（）函数有参</button>
		 <button class="btn5">text（）函数无参</button>
		 <p>lorem4</p>
		 <p>lorem5</p>
		 <p>lorem6</p>
		<script>
			//抓到无参按钮，点击，打印p的text值
			//抓到有参按钮，点击，改变p中文本的内容：改变效果
			$(".btn4").click(function(){
				var ptext=$("p").text();
                alert(ptext);
			})
			$(".btn5").click(function(){
				var ptext=$("p").text("改变效果");
			    alert(ptext);
			})
			/* $(".btn3").click(function(){
				// 下拉列表 抓select元素
				// var vals=$("select").val("rem1");
				// 抓取打印select的JS对象。默认字符串形式表示【object Object】
				// 抓取打印select的JS对象，调用对象toString（）方法，如果没有重写【object Object】
				//设置 第一个option的value值
				$("select").val("rem1");
				var vals=$("select").val("rem1");
				alert("val()函数针对下拉列表："+vals)
			}); */
		/* 	$(".btn2").click(function(){
				var vals=$("select").val();
				alert("val()函数针对下拉列表："+vals)
			}); */
			/* $(".btn1").click(function(){
				// 变量名不允许使用关键字  js中关键字  for in遍历数组
				var in=$("input").val();
				alert("val（）针对input元素 无参"+ins);
			});
			 */
			
			
			/* // 按钮，点击按钮，实现span内容 改成lorem lorem
			$("button").click(function(){
				$("span").html("<span>lorem</span>")
			}); */
			/* 变量  js变量--jq变量
			 int i=1;   Java写法  强类型语言
			 var i=数值、元素；JavaScript 弱类型语言
			 */
		/* 	var html=$("span").html();
			alert("html()函数的无参值："+html); */
		</script>
	</body>
</html>